<script setup lang="ts">
import { computed, reactive } from 'vue';
import { router } from '../router';
import axios from '../axios'
import { ElMessage } from 'element-plus';
import BigButton from '../components/BigButton.vue';
import { Template } from '../model';

const templateId = computed(() => parseInt(<string> router.currentRoute.value.params.id))

const template = reactive<Template>({
    id: templateId.value,
    tableName: '',
    description: '',
    creationTime: ''
})

const saveInfo = async () => {
    const res = await axios.put(`/admin/template`, {
        templateId: template.id,
        tableName: template.tableName,
        description: template.description, 
    })

    if (!res.data['ok']) {
        ElMessage({
            type: 'error',
            message: '保存审批流信息失败',
        })
        return
    }

    ElMessage({
        type: 'success',
        message: '保存成功',
    })
}

;(async () => {
    const res = await axios.get(`/template?templateId=${templateId.value}`)
    if (!res.data['ok']) {
        ElMessage({
            type: 'error',
            message: '查询审批流信息失败',
        })
        return
    }

    template.id = res.data['template']['id']
    template.tableName = res.data['template']['tableName']
    template.description = res.data['template']['description']
    template.creationTime = res.data['template']['creationTime']
})()
</script>

<template>
    <div class="template-info">
        <el-page-header
            title="返回"
            @back="router.back()"
        >
            <template #content>
                审批流信息编辑
            </template>
        </el-page-header>
        <el-divider />
        <el-form
            :model="template"
            label-width="50px"
        >
            <el-form-item label="名称">
                <el-input v-model="template.tableName" />
            </el-form-item>

            <el-form-item label="描述">
                <el-input v-model="template.description"  />
            </el-form-item>

            <el-form-item>
                <el-button @click="saveInfo">
                    保存
                </el-button>
            </el-form-item>
        </el-form>
        <el-divider />

      <div style="display: flex; justify-content: space-between;">
        <BigButton title="审批问题设置" @click="router.push(`/template/${template.id}/question`)" style="margin-top: 20px;"/>
        <BigButton title="审批人设置" @click="router.push(`/template/${template.id}/approver`)" style="margin-top: 20px;" />
      </div>

    </div>
</template>

<style scoped>
.template-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 20px;
}

.template-info > .el-page-header {
  width: 100%;
}

.template-info > .el-form {
  width: 100%;
  margin-left: 0; /* Remove the left margin */
}

.template-info > .big-button {
  height: 5%;
  width: 30%;
  margin-left: 20px;
}
</style>
